<template>

  <div>
    <div class="panel">
      <el-form ref="condition" :model="condition">
        <panel-title title="">
          <el-button type="success" icon="plus" size="mini" @click="goAdd()">添加商品</el-button>
        </panel-title>
      </el-form>
    </div>

    <div class="panel">
      <div class="panel-body">
        <el-table
          :data="table_data"
          v-loading="load_data"
          element-loading-text="拼命加载中" size="mini"
          border
          style="width: 100%;">

          <el-table-column
            prop="classifyId"
            label="类型"
          >
          </el-table-column>

          <el-table-column
            prop="code"
            label="编码"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
          >
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
          >
          </el-table-column>
          <el-table-column
            prop="firstCost"
            label="成本价"
          >
          </el-table-column>

          <el-table-column
            prop="stock"
            label="存量"
          >
          </el-table-column>
          <el-table-column
            prop="agentEnable"
            label="代理价格"
          >
            <template scope="props">
              <el-tag type="danger" size="mini" v-if="props.row.agentEnable == 1">关闭</el-tag>
              <el-tag type="success" size="mini" v-if="props.row.agentEnable == 2">打开</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="wholesaleEnable"
            label="批发价格"
          >
            <template scope="props">
              <el-tag type="danger" size="mini" v-if="props.row.wholesaleEnable == 1">关闭</el-tag>
              <el-tag type="success" size="mini" v-if="props.row.wholesaleEnable == 2">打开</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="freeLimit"
            label="免费限购"
          >
            <template scope="props">
              <el-tag type="danger" size="mini" v-if="props.row.freeLimit == 1">关闭</el-tag>
              <el-tag type="success" size="mini" v-if="props.row.freeLimit == 2">打开</el-tag>
            </template>
          </el-table-column>


          <el-table-column
            prop="status"
            label="状态"
          >
            <template scope="props">

              <el-tag type="danger" size="mini" v-if="props.row.status == 1">上架</el-tag>
              <el-tag type="success" size="mini" v-if="props.row.status == 2">下架</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop='insertTime'
            label="创建时间"
          >
            <template scope="props">
              {{timeFormatter(props.row.createTime)}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作" align="center">
            <template scope="props">
              <el-dropdown trigger="click">
                <el-button type="primary" size="mini">
                  操作<i class="el-icon-caret-bottom el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <!--<router-link :to="{name: 'tableUpdate', params: {id: props.row.id}}" tag="span">
                      <el-button type="info" size="small" icon="edit">修改</el-button>
                    </router-link>-->
                    <el-button type="primary" size="mini" @click="detail(props.row)">
                      详情
                    </el-button>

                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="warning" size="mini" @click="edit(props.row)">
                      编辑
                    </el-button>
                  </el-dropdown-item>

                  <el-dropdown-item>
                    <el-button type="danger" size="mini" @click="del(props.row)">
                      删除
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </template>
          </el-table-column>
        </el-table>
        <!-- <bottom-tool-bar>
           <div slot-scope="page">
             <el-pagination
               @current-change="handleCurrentChange"
               :current-page="currentPage"
               :page-size="length"
               layout="total, prev, pager, next"
               :total="total">
             </el-pagination>
           </div>
         </bottom-tool-bar>-->
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import {panelTitle, bottomToolBar} from 'components'

  export default {
    data() {
      return {
        condition: {},
        load_data: false,
        table_data: [],
        //当前页码
        currentPage: 1,
        //数据总条目
        total: 0,
        //每页显示多少条数据
        length: 10,
      }
    },
    components: {
      panelTitle,
      bottomToolBar

    },
    methods: {

      timeFormatter(time, column) {
        if (!time) {
          return "";
        }
        return this.$dateFormat(time, "yyyy-MM-dd hh:mm")

      },
      get_table_data() {
        this.load_data = true
        this.$fetch.api_product.queryList()
          .then((data) => {
            this.table_data = data.data
            this.load_data = false
          })
          .catch(() => {
            this.load_data = false
          })
      },
      handleCurrentChange(val) {
        // this.currentPage = val
        this.get_table_data()
      },

      /**
       * 去添加商品
       */
      goAdd() {
        this.$router.push({path: '/product/add'})
      }

    },
    mounted() {
      this.get_table_data()
    }
  }
</script>
